<template>
  <div class="addressList">
    <div class="height">
      <i class="el-icon-arrow-left" @click="goBack"></i>
      <span>我的地址</span>
      <i class="el-icon-plus" @click="addAddress"></i>
    </div>
    <div class="addressBox" v-for="(item,index) in addressList" :key="index">
      <div class="nameAndPhone" @click="DefaultAddress(item.id)">
        <span>{{item.name}}</span>
        <span>{{item.phone}}</span>
      </div>
      <div class="addressText" @click="DefaultAddress(item.id)">
        {{item.address}}
      </div>
      <div class="operation">
        <el-radio v-model="radio" :label="item.status" @change="DefaultAddress(item.id)">设为默认地址</el-radio>
        <div>
          <el-button size="mini" @click="editAddress(item)">编辑</el-button>
          <el-button size="mini" @click="delAddress(item.id)">删除</el-button>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'addressList',
  data () {
    return {
      addressList:[
        {
          name: '武鹏磊',
          phone: '17734806847',
          address: '杭州市滨江区滨文路长虹苑'
        },
        {
          name: '武鹏磊',
          phone: '17734806847',
          address: '杭州市滨江区滨康路创客E族'
        }
      ],
      radio: 'default',

    }
  },
  computed:{
    token() {
      return this.$store.state.app.token
    },
    userId() {
      return this.$store.state.app.userId
    },
  },
  mounted(){
        if(this.userId&&this.token){
            this.mailAddress();
            
        }else{
            this.$router.push('/newAddress')
        }
  },
  methods:{
    ...mapMutations([
        'inAddress' // 将 `this.formChange(row)` 映射为 `this.$store.commit('formChange', row)`
      ]),
    goBack(){
      this.$router.push('/');
    },
    addAddress(){
      this.$router.push('/newAddress')
    },
    editAddress(item){
      this.inAddress(item)
      this.$router.push('/editAddress');
      // this.$router.push({name:'editAddress',query:{id: id}});
    },
    mailAddress(){
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
        });
        this.axios({
            method: 'post',
            url: '/app/campus/mailAddress/list4userId',
            headers: {'userId': this.userId,'token': this.token},
            data: {
              pageNo: 1,
              pageSize: 10,
            }
        }).then(res =>{
            // console.log(res.data);
            
            if(res.data.data.length > 0){
                this.addressList = res.data.data;
            }else{
                this.$router.push('/newAddress')
            }
            loading.close();
        })
    },
    DefaultAddress(id){
        this.axios({
            method: 'post',
            url: '/app/campus/mailAddress/updateDefaultMailAddress',
            headers: {'userId': this.userId,'token': this.token},
            data: {
              id: id,
            }
        }).then(res =>{
            console.log(res.data);
            this.$router.push('/')
            // this.mailAddress();
        })
    },
    delAddress(id){
        this.axios({
            method: 'post',
            url: '/app/campus/mailAddress/deleteMailAddress',
            headers: {'userId': this.userId,'token': this.token},
            data: {
              id: id,
            }
        }).then(res =>{
            console.log(res.data);
            this.mailAddress();
        })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.height{
  background: #fcd927;height: 42px;font-size: 16px;line-height: 42px;text-align: center;color: #fff;padding: 0 8px;display: flex;justify-content: space-between;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);margin-bottom: 3px;
}
.height i{line-height: 42px;font-size: 18px;}
.addressBox{box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);background: #fff;margin-bottom: 3px;}
.nameAndPhone{display: flex;justify-content: space-between;padding: 12px 20px 5px;font-size: 15px;font-weight: bold;}
.addressText{text-align: left;padding: 5px 20px 10px;font-size: 15px;border-bottom: 1px dotted #ccc}
.operation{padding: 10px 20px;display: flex;justify-content: space-between;align-items: center;}
</style>
